<template>
	<view class="home">
		<u-tabs :list="list" :scrollable="false" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
			lineColor="#3268dd" @click="clickTabs">
		</u-tabs>
		<view class="weather">
			<view class="weather_icons">
				<view class="tubiao">

					<view class="tub">
						<text :class="icon"></text>
					</view>
					<view class="tex">
						体感温度：{{tianqi.feelsLike}}°
					</view>
				</view>
				<view class="text">
					<view class="a">
						{{tianqi.temp}}°
					</view>
					<view class="b">
						{{tianqi.text}}
					</view>
				</view>
			</view>
			<view class="weather_text">
				<view class="item">
					<view class="text_a">
						{{tianqi.pressure}}hPa
					</view>
					<view class="text_b">
						大气压
					</view>
				</view>
				<view class="" style="width: 1rpx;height: 40rpx;background-color: #ffffff;"></view>
				<view class="item">
					<view class="text_a">
						{{tianqi.vis}}km
					</view>
					<view class="text_b">
						能见度
					</view>
				</view>
				<view class="" style="width: 1rpx;height: 40rpx;background-color: #ffffff;"></view>
				<view class="item">
					<view class="text_a">
						{{tianqi.humidity}}%
					</view>
					<view class="text_b">
						相对湿度
					</view>
				</view>
			</view>
			<view class="day">
				更新时间 {{tianqi.time}}
			</view>
		</view>
		<view class="windspeed">
			<view class="item">
				<view class="text_a">
					{{tianqi.windSpeed}}km/h
				</view>
				<view class="text_b">
					风速
				</view>
			</view>
			<view class="" style="width: 1rpx;height: 40rpx;background-color: #55557f;"></view>
			<view class="item">
				<view class="text_a">
					{{tianqi.wind360}}
				</view>
				<view class="text_b">
					风向
				</view>
			</view>
			<view class="" style="width: 1rpx;height: 40rpx;background-color: #55557f;"></view>
			<view class="item">
				<view class="text_a">
					{{tianqi.windScale}} 级
				</view>
				<view class="text_b">
					{{tianqi.windDir}}
				</view>
			</view>
		</view>
		<view class="status_box">
			<view class="dev_status">
				<view class="">
					设备编码：
				</view>
				<view class="">
					{{thingsModelValue.imei}}
				</view>
			</view>
			<view class="dev_status">
				<view class="">
					电池电量：
				</view>
				<view class="">
					{{thingsModelValue.batc}}%
				</view>
			</view>
			<view class="dev_status">
				<view class="">
					太阳能电池：
				</view>
				<view class="">
					{{thingsModelValue.sunv}}%
				</view>
			</view>
			<view class="dev_status">
				<view class="">
					经度：
				</view>
				<view class="">
					{{thingsModelValue.lon}}
				</view>
			</view>
			<view class="dev_status">
				<view class="">
					纬度：
				</view>
				<view class="">
					{{thingsModelValue.lat}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js';
	export default {
		data() {
			return {
				tianqi:{},
				icon: 'qi-100',
				activeStyle: {
					color: '#3268dd'
				},
				inactiveStyle: {
					color: '#939393'
				},
				list: [{
					name: '今日',
				}, {
					name: '3天',
				}, {
					name: '15天'
				}, {
					name: '60天'
				}],
				deviceName: '',
				productKey: '',
				beginReportingTime: '',
				endReportingTime: '',
				thingsModelValue:{}
			}
		},
		onLoad(option) {
			this.deviceName = option.devneme
			this.productKey = option.key
			this.devshowFn(option.id)
		},
		methods: {
			// 天气
			weatherFn(e) {
				console.log('eeeee',e);
				let key = '569de1237a82445cabd591293f21badd'
				uni.request({
					url: 'https://devapi.qweather.com/v7/weather/now',
					data: {
						location: e,
						key: key
					},
					success: (res) => {
						this.tianqi = res.data.now
						this.tianqi.time = dayjs(res.data.now.obsTime).format('YYYY-MM-DD HH:mm:ss')
						this.icon = 'qi-' + res.data.now.icon
					}
				});

			},
			clickTabs(item) {
				console.log('item',item);
				// this.days(item.index)
			},
			// 图表时间
			days(index) {
				let now = dayjs();
				// 今日时间
				let todayStart = now.subtract(0, 'hour').format('YYYY-MM-DD ') + '00:00:00'
				let todayEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 3天
				let threeStart = now.subtract(2, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let threeEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 15天
				let fifteenStart = now.subtract(14, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let fifteenEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 100天
				let sixtyStart = now.subtract(59, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let sixtyEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				if (index == 0) {
					this.beginReportingTime = todayStart
					this.endReportingTime = todayEnd
					this.deviceNex()
				}
				if (index == 1) {
					this.beginReportingTime = threeStart
					this.endReportingTime = threeEnd
					this.deviceNex()
				}
				if (index == 2) {
					this.beginReportingTime = fifteenStart
					this.endReportingTime = fifteenEnd
					this.deviceNex()
				}
				if (index == 3) {
					this.beginReportingTime = sixtyStart
					this.endReportingTime = sixtyEnd
					this.deviceNex()
				}
			},
			// 图表数据
			deviceNex() {
				// console.log('水位数据', this.deviceName, this.productKey, this.beginReportingTime, this.endReportingTime, );
				uni.$u.http.get('/device/device_reported_data/selectModelReportData', {
					params: {
						"tabPosition": 1,
						"identifier": 'HLUT',
						"deviceName": this.deviceName,
						"productKey": this.productKey,
						"beginReportingTime": this.beginReportingTime,
						"endReportingTime": this.endReportingTime,
					}
				}).then(res => {

					if (res.code == 200) {

					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
						uni.reLaunch({
							url: '/pages/home/login'
						});
					}
				}).catch(err => {
					console.log('错误', err);
					uni.showToast({
						title: '网络错误',
						duration: 1500
					})
				})
			},
			// 设备详情
			devshowFn(e) {
				uni.$u.http.get('/device/device/getInfoPhone/' + e).then(res => {
					console.log('res',res);
					if (res.code == 200) {
						let arr = JSON.parse(res.data.thingsModelValue)
						console.log('设备信息',arr);
						let obj = {}
						for(let i = 0;i<arr.length;i++){
							if(arr[i].identifier == 'LONG'){
								obj.lon = arr[i].value
							}
							if(arr[i].identifier == 'LATI'){
								obj.lat = arr[i].value
							}
							if(arr[i].identifier == 'BATC'){
								obj.batc = arr[i].value
							}
							if(arr[i].identifier == 'SUNV'){
								obj.sunv = arr[i].value
							}
							if(arr[i].identifier == 'IMEI'){
								obj.imei = arr[i].value
							}
						}
						let lonlat = obj.lon.toFixed(2) + ',' + obj.lat.toFixed(2)
						this.thingsModelValue = obj
						this.weatherFn(lonlat)
						console.log('obj',obj);
						
						
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
						uni.reLaunch({
							url: '/pages/home/login'
						});
					}
				}).catch(err => {
					console.log('err', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			}

		}
	}
</script>
<style scoped lang="scss">
	.home {
		padding: 0 40rpx;

		.weather {
			width: 480rpx;
			// height: 380rpx;
			margin: 30rpx auto;
			padding: 20rpx;
			border-radius: 50rpx;
			background-color: #196bed;

			.weather_icons {
				display: flex;
				align-items: center;
				justify-content: center;
				// background-color: #8cc6ff;

				.tubiao {
					color: #ffffff;
					text-align: center;

					.tub {
						font-size: 140rpx;
					}

					.tex {
						font-size: 30rpx;
					}
				}

				.text {
					text-align: center;
					color: #ffffff;
					margin-left: 50rpx;

					.a {
						font-size: 80rpx;
					}

					.b {
						font-size: 50rpx;
					}
				}
			}

			.weather_text {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-radius: 30rpx;
				padding: 30rpx 0;
				background-color: rgba(0, 0, 0, 0.1);

				.item {

					text-align: center;
					color: #ffffff;

					.text_a {
						font-size: 35rpx;
					}

					.text_b {
						font-size: 25rpx;
					}
				}
			}
		}

		.day {
			margin: 0 auto;
			// background-color: #5e97ed;
			text-align: center;
			border-radius: 20rpx;
			padding: 10rpx 0;
			font-size: 30rpx;
			color: #ffffff;
		}

		.windspeed {
			width: 600rpx;
			height: 150rpx;
			margin: 30rpx auto;
			border-radius: 50rpx;
			background-color: #eff7fe;
			// background-color: #fdd15a;
			display: flex;
			align-items: center;
			justify-content: space-around;

			// box-shadow: 0rpx 0rpx 30rpx #8eaac2;
			.item {

				text-align: center;
				color: #0f1a64;

				.text_a {
					font-size: 40rpx;
				}

				.text_b {
					font-size: 35rpx;
				}
			}
		}

		.status_box {
			padding: 40rpx;
			border-radius: 20rpx;
			// background-color: rgba(0, 0, 0, 0.1);

			.dev_status {
				color: #4b4e50;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #4b4e50;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// background-color: #f3f3f3;
			}
		}

	}
</style>
<style>
	/* 引入字体图标 */
	@import url("/static/fonts/icons/qweather-icons.css");
</style>
<style>
	page {
		background-color: #ffffff;
	}
</style>